import React from 'react'
import { useLocation, useNavigate } from "react-router-dom"
import { ArrowLeft, Passed, Close, SmileCommentO, Location } from '@react-vant/icons';
import { CountDown, Button } from 'react-vant';

type Props = {}

const Detail = (props: Props) => {
  const location = useLocation()
  console.log(location.state);
  const navigate = useNavigate()
  // 信息状态
  const informationStatus = location.state.teg
  // lists 
  const lists = location.state
  // 出发地
  const start = lists.title.slice(0, 3)
  // 目的地
  const end = lists.title.slice(4, 8)
  // 出发时间
  const timestart = lists.date.slice(11, 17)
  // 到达时间
  const timeend = lists.date.slice(19, 25)
  const timedaty = lists.date.slice(5, 7) + '月' + lists.date.slice(8, 10) + '日'
  // 车牌号
  const licenseplate = lists.title.slice(8, 13)
  // 支付详情
  const topaymentdetails = () => {
    navigate("/paymentdetails",{state:location.state})
  }
  // 重新订购订单填写
  const toorderfilling = () => {
    navigate("/orderfilling",{state:location.state})
  }
  return (
    <div className='detail'>
      <header>
        <div className="back">
          <span onClick={() => { navigate(-1) }}><ArrowLeft /></span><span className='listdeatil'>订单详情</span><span></span>
        </div>
        <div className={informationStatus === "出票成功" || informationStatus === "已取消" ? "information" : "mack"}>
          <span>{informationStatus === "出票成功" ? <Passed fontSize={40} /> : <Close fontSize={40} />}</span>
          <div>
            <h3>{lists.teg}</h3>
            <p>{informationStatus === "出票成功" ? '请您持购票证件在车站或代售点取票后按时乘车' : '您的订单因支付超时取消，可重新订购'}</p>
          </div>
        </div>
        <div className={informationStatus === "待支付" ? "paymentdiv" : "mack"}>
          <h3>{lists.teg}</h3>
          <p>支付剩余<b><CountDown time={30 * 60 * 60 * 1000} millisecond format="mm:ss:SS">
            {(timeData) => (
              <div className='settime'>
                <span className="block">{timeData.minutes}</span>
                <span className="block">:</span>
                <span className="block">{timeData.seconds}</span>
              </div>
            )}
          </CountDown></b></p>
        </div>
        <div className={informationStatus === "退款成功" ? "information" : "mack"}>
          <span><SmileCommentO fontSize={40} /></span>
          <div>
            <h3>{lists.teg}</h3>
            <p>您的订单已退款，金钱已原路返回</p>
          </div>
        </div>
      </header>
      <div className="orderdetails">
        <div className="collection"><p>取票号:BW123455</p></div>
        <div className="dataday"><span>{timedaty}周二</span><span>{timedaty}周二</span></div>
        <div className="times"><b>{timestart}</b><div>-<span>经停信息</span>-</div><b>{timeend}</b></div>
        <div className="citys"><span>{start}<Location /></span><span>{licenseplate}</span><span>{end}<Location /></span></div>
        <div className="passengerinformation">
          <p><span>{lists.name}</span><span>一等座￥{lists.price}</span></p>
          <p><span>身份证:{lists.identity}</span><span>{lists.number}</span></p>
          <p><span className={lists.teg === '出票成功' ? "suuse" : "" || lists.teg === '待支付' ? "payment" : ""}>{lists.teg}</span></p>
        </div>
      </div>
      <div className="notice">
        <p className='p1'>
          <span>订单号</span><span>E369941878</span>
        </p>
        <p>
          <span>通知手机</span><span>188123456789</span>
        </p>
      </div>
      <div className="vote">
        <p className='p1'>
          <span>成人票</span><span>￥{lists.price}x1张</span>
        </p>
        <p>
          <span>订单总计</span><span>￥{lists.price}</span>
        </p>
      </div>
      <footer className={informationStatus === "待支付" || informationStatus === "已取消" ? "footer" : "mack"}>
        <Button type='primary' block round color='#FF7A00' onClick={lists.teg === "待支付" ? topaymentdetails : toorderfilling}>
          <b style={{ color: "#fff", fontSize: "15px" }}>{informationStatus === "待支付" ? '去 支 付' : '重 新 订 购'}</b>
        </Button>
      </footer>
    </div>
  )
}

export default Detail